<%@ page import="com.xyzboom.web.servlets.resourse.ResourceHandler" %>
<%@ page import="com.xyzboom.utils.WebUtils" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="xyzboom" uri="com.xyzboom.tld" %>
<%
    String contextPath = request.getContextPath();
%>
<html>
<head>
    <title>登录</title>
</head>
<body>
<form method="post" action="<c:url value="/servlets/login/LoginController" />">
    用 户:
    <label>
        <input type="text" name="username"/>
    </label><br/>
    密 码:
    <label>
        <input type="password" name="password"/>
    </label><br/>
    验证码:
    <label>
        <input type="text" name="verify_code" id="verify_code">
    </label>
    <img src="<c:url value="/resource?other=/servlets/login/VerifyImage.jpg"/>" alt="验证码"
         onclick="onVerifyImageClicked(this)" id="verify_code_img">
    <br/>
    <label for="college">所在学院:</label>
    <select name="college" id="college" onChange="onCollegeChanged(this, this.form.major)">
        <option value="" selected>--请选择--</option>
        <option value="计算机科学与工程学院">计算机科学与工程学院</option>
        <option value="材料科学与工程学院">材料科学与工程学院</option>
        <option value="理学院">理学院</option>
        <option value="其他学院">其他学院</option>
        <%--TODO 添加更多学院--%>
    </select><br/>
    <label for="major">所在系:</label>
    <select name="major" id="major">
        <option value="" selected>--请选择--</option>
    </select><br/>
    <br/>
    <input type="submit" value="登录" onclick="return onSubmit(this.form)">
    <input type="button" value="帮助">
    <input type="button" value="忘记密码">
</form>
<script type="text/javascript" src="<xyzboom:res name="auto_change_selector" type="js"/>">
</script>
<script type="text/javascript" charset="UTF-8">
    verify_code_not_cache = 0;

    function onVerifyImageClicked(img) {
        img.src = "<c:url value="/resource?other=/servlets/login/VerifyImage.jpg"/>" + "&i=" + verify_code_not_cache;
        verify_code_not_cache++;
        document.getElementById("verify_code").value = "";
    }

    function onSubmit(form) {
        if (form.verify_code.value === "") {
            alert("请输入验证码！");
            return false;
        }
        let verify_code = form.verify_code.value.toLowerCase();
        let httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
        httpRequest.open('POST', '<c:url value="/servlets/login/ExamVerify"/>', true);//第二步：打开连接  将请求参数写在url中
        httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
        httpRequest.send('client_verify=' + verify_code);//第三步：发送请求  将请求参数写在URL中
        /**
         * 获取数据后的处理程序
         */
        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState === 4 && httpRequest.status === 200) {
                let result = httpRequest.responseText;//获取字符串
                if (result === "0") {
                    alert("验证码错误！")
                    onVerifyImageClicked(document.getElementById("verify_code_img"));
                } else if (result === "null") {
                    alert("验证码已经过期！")
                    onVerifyImageClicked(document.getElementById("verify_code_img"));
                } else if (result === "1") {
                    form.submit();
                }
            }
        };
        return false;
    }
</script>
</body>
</html>
